<template>
	<view class="details">
		<view class="ul">
			<view><image :src="initData.image" mode="widthFix" class="img" /></view>
			<view>
				<text class="text">订单号：</text>
				{{ initData.orderSn }}
			</view>
			<view>
				<text class="text">商品货号：</text>
				{{ initData.goodsSn }}
			</view>
			<view>
				<text class="text">供应商信息：</text>
				{{ initData.supplierName }}
			</view>
			<view>
				<text class="text">数量：</text>
				1件
			</view>
			<view>
				<text class="text">客户名称：</text>
				{{ initData.contactUser }}
			</view>
			<view>
				<text class="text">联系电话：</text>
				{{ initData.contactPhone }}
			</view>
			<view v-for="item in initData.sku" :key="item.value">
				<text class="text">{{ item }}</text>
			</view>
			<view>
				<text class="text">收货地址：</text>
				{{ initData.addrDetail }}
			</view>
			<view>
				<text class="text">客服名称：</text>
				{{ initData.shipperName }}
			</view>
			<view>
				<text class="text">订单类型：</text>
				{{ initData.orderType.desp }}
			</view>
			<view>
				<text class="text">所属代理：</text>
				{{ initData.expressSn }}
			</view>
			<view>
				<text class="text">发货员：</text>
				{{ initData.expressSn }}
			</view>
			<view>
				<text class="text" v-if="initData.shipTime == ''">发货时间：</text>
				{{ initData.shipTime }}
			</view>
			<view>
				<text class="text">备注：</text>
				{{ initData.remark }}
			</view>
			<view>
				<text class="text">客服备注：</text>
				{{ initData.remark }}
			</view>
			<view><text class="text">物流信息：</text></view>
		</view>
		<view class="msg">
			<view class="li">
				<text>订单类型：</text>
				<picker @change="bindPickerChange" :value="index" :range="array" range-key="desp">
					<view class="uni-input">{{ array[index].desp }}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			<view class="li">
				<text>退回原因：</text>
				<picker @change="bindPickerChange1" :value="index1" :range="dict">
					<view class="uni-input">{{ dict[index] }}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			<view class="li">
				<text>退回备注：</text>
				<textarea value="" placeholder="" v-model="backRemark" />
			</view>
			<view class="button">
				<view class="accept" @click="accept()">接 受</view>
				<view class="reject" @click="open">驳 回</view>
				<view class="rejects" @click="">入次品库</view>
			</view>
		</view>
		<view class="go-top" v-show="is_go_top" @click="backTop"><image src="/static/img/go_top.png" /></view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="title">订单驳回</view>
				<view class="p">驳回原因：</view>
				<textarea value="" placeholder="" />
				<view class="button">
					<view class="accept" @click="save()">确认驳回</view>
					<view class="reject" @click="close">取 消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { uniIcons, uniPopup } from '@dcloudio/uni-ui';
import entrepot from '../../servers/entrepot/entrepot.js';
export default {
	components: { uniIcons, uniPopup },
	data() {
		return {
			initData: '',
			index1: 0,
			dict: [],
			backRemark: '',
			remark: '',
			reason: '',
			afterSaleType: '',
			id: '',
			array: [{ value: 1, desp: '退货' }, { value: 2, desp: '换货' }],
			index: 0,
			is_go_top: false
		};
	},
	mounted() {
		this.ininData();
		this.initPage();
	},
	onPageScroll: function(e) {
		//nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > 200) {
			this.is_go_top = true;
		} else {
			this.is_go_top = false;
		}
	},
	methods: {
		ininData() {
			var obj1 = new Object();
			obj1.dictGroupCode = 'returnsReason';
			entrepot
				.getDictByCode(obj1)
				.then(res => {
					res.data.map(v => {
						this.dict.push(v.dictValueDesp);
					});
					this.afterSaleType = this.array[0].value;
					this.reason = this.dict[0];
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
			
		},
		initPage() {
			var orderSn = 'sn31'; /* TODO从扫码出获取 */
			uni.showLoading({
				title: '数据加载中'
			});
			var obj = new Object();
			obj.orderSn = orderSn;
			entrepot
				.scanCodeDetalis(obj)
				.then(res => {
					this.initData = res.data;
					this.initData.image = this.imgCDNUrl + res.data.productImg;
					var sku = [];
					if (this.initData.productSkuDesp) {
						sku = this.initData.productSkuDesp.split(',');
					}
					this.initData.sku = sku;
					uni.hideLoading();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		accept() {
			var tmp = new Object();
			tmp.afterSaleType = this.afterSaleType;
			tmp.applyReason = this.reason;
			if (this.remark != '') {
				tmp.remark = this.remark;
			}
			uni.showLoading({
				title: '数据保存中'
			});
			entrepot
				.accept(tmp)
				.then(res => {
					res.data;
					if (res.data.code == 200) {
						uni.hideLoading();
						uni.showToast({
							title: '数据已保存',
							duration: 2000,
							complete() {
								uni.navigateTo({
									url: '/pages/entrepot/index'
								});
							}
						});
					}
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		// 计算距离顶部的高度，均分10等分，
		backTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		},
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		bindPickerChange1(e) {
			this.index1 = e.target.value;
			this.reason = this.dict[this.index];
		},
		bindPickerChange(e) {
			this.index = e.target.value;
			this.afterSaleType = this.array[this.index].value;
		}
	}
};
</script>
<style lang="less" scoped>
page {
	background: #ffffff;
}
.details {
	.img {
		width: 100%;
		border: 1px solid #efeff4;
	}
	.ul {
		line-height: 72rpx;
		font-size: 24rpx;
		color: #999999;
		padding: 20rpx;
		.text {
			display: inline-block;
			width: 180rpx;
			text-align-last: justify;
			color: #333;
		}
	}
}
.msg {
	padding: 20rpx;
	border-top: 26rpx solid #f6f6f6;
	.li {
		position: relative;
		display: flex;
		flex-direction: row;
		line-height: 120rpx;
		text {
			font-size: 28rpx;
			width: 180rpx;
			text-align-last: justify;
		}
		textarea,
		picker {
			font-size: 26rpx;
			width: 557rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			padding: 0 27rpx;
			box-sizing: border-box;
			margin: 15rpx 0;
			background: #ffffff;
			.uni-placeholder {
				color: #999999;
			}
		}
		textarea {
			height: 300rpx;
		}
		.uni-arrowdown {
			position: absolute;
			right: 0;
			top: 15rpx;
			width: 50rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			pointer-events: none;
		}
	}
	.button {
		margin-top: 50rpx;
		display: flex;
		flex-direction: row;
		view {
			width: 208rpx;
			line-height: 74rpx;
			border-radius: 37rpx;
			text-align: center;
			font-size: 28rpx;
			margin-right: 45rpx;
		}
		.accept {
			color: #fff;
			background: linear-gradient(80deg, #d2158a, #fc6395);
		}
		.reject {
			color: #bd3c8c;
			border: 1px solid #bd3c8c;
		}
		.rejects {
			margin-right: 0;
			color: #666666;
			border: 1px solid #e1e1e1;
		}
	}
}
.popup {
	width: 612rpx;
	padding: 20rpx;
	background: #ffffff;
	border-radius: 20rpx;

	.title {
		text-align: center;
		font-size: 30rpx;
		line-height: 60rpx;
	}
	.p {
		font-size: 28rpx;
	}
	textarea {
		width: 100%;
		height: 258rpx;
		padding: 20rpx;
		margin-top: 25rpx;
		border: 1px solid #efefef;
		box-sizing: border-box;
	}
	.button {
		margin-top: 50rpx;
		padding: 0 50rpx;
		display: flex;
		flex-direction: row;
		text-align: center;
		view {
			width: 208rpx;
			line-height: 74rpx;
			border-radius: 37rpx;
			font-size: 28rpx;
			margin: 0 32.5rpx;
		}
		.accept {
			color: #fff;
			background: linear-gradient(80deg, #d2158a, #fc6395);
		}
		.reject {
			color: #bd3c8c;
			border: 1px solid #bd3c8c;
		}
	}
}
</style>
